<template>
  <div class="box">
    <p class="boxDate">{{ dateYear }}</p>
    <p class="boxTime">{{ dateDay }}</p>
    <p class="boxDay">{{ dateWeek }}</p>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'

let dateDay = ref(null)
let dateYear = ref(null)
let dateWeek = ref(null)
let timer = ref(null)
let weekday = reactive([
  '星期日',
  '星期一',
  '星期二',
  '星期三',
  '星期四',
  '星期五',
  '星期六',
])

onMounted(() => {
  init()
  timer.value = setInterval(() => {
    init()
  }, 1000)
})
const init = () => {
  const date = dayjs(new Date())
  dateDay.value = date.format('HH:mm:ss')
  dateYear.value = date.format('YYYY-MM-DD')
  dateWeek.value = date.format(weekday[date.day()])
}
onBeforeUnmount(() => {
  
  if (timer.value) {
    clearInterval(timer.value)
  }
})
</script>

<style lang="scss" scoped>
.box {
  color: #fff;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  .boxTime {
    margin: 0 8px 0 5px;
  }
}

</style>
